<script setup lang="ts">
import { computed, reactive } from "vue";
import { useUser } from "@/store/user";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { UserControllerService } from "../../../generated";

const router = useRouter();
let user = useUser();
const { registerUser, stateRegister, registerRoutes } = storeToRefs(user);
if (!(stateRegister.value >= 0.6)) {
  router.push(registerRoutes.value[(stateRegister.value * 10) / 3] as string);
}
const ruleUser = reactive({
  userProfileStatus: computed(() => {
    if (registerUser.value.userProfile == "") {
      return "warning";
    }
    return (loginRule.userProfile as number) <=
      (registerUser.value.userProfile as string).length
      ? "success"
      : "error";
  }),
});

const loginRule = reactive({
  userProfile: 15,
});

function checkRuleName() {
  if (registerUser.value.userProfile == "") {
    return false;
  }
  if (
    (loginRule.userProfile as number) <=
    (registerUser.value.userProfile as string).length
  ) {
    return true;
  } else {
    return false;
  }
}

async function goToUserInfo() {
  if (!checkRuleName()) {
    message.error("请您自我介绍的详细一点");
    return;
  }
  user.nextPro();
  const cancelablePromise = await UserControllerService.userRegisterUsingPost(
    registerUser.value
  );
  if (cancelablePromise.code == 0) {
    message.success("注册成功");
    registerUser.value = {};
    await router.push("/login");
  } else {
    message.error("注册失败," + cancelablePromise.message);
  }
}
</script>

<template>
  <a-space direction="vertical" size="large" style="width: 100%">
    <a-form :model="registerUser" :layout="'vertical'" style="width: 100%">
      <a-form-item
        field="userAccount"
        label="个人简介:"
        :help="'请做一个15个字的自我介绍'"
        :validate-status="ruleUser.userProfileStatus"
      >
        <a-textarea
          class="input"
          v-model="registerUser.userProfile"
          placeholder="请简要的做一下自我介绍"
          oncopy="return false"
        />
      </a-form-item>
      <a-form-item>
        <a-button class="button" @click="goToUserInfo" type="primary"
          >提交
        </a-button>
      </a-form-item>
    </a-form>
  </a-space>
</template>

<style scoped>
.input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  width: 100%;
  margin: 0 0 15px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  font-size: 20px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
  height: 300px;
}

.button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  width: 100%;
  border: 0;
  padding: 15px;
  font-size: 14px;
  cursor: pointer;
  height: 40px;
  border-radius: 1ch;
}

.button:active {
  background: #74c0fc;
}
</style>
